<template>
  <div class="room-detail-container">
    <!-- 子导航栏 -->
    <div class="room-detail-wrapper">
      <!-- 左侧编辑区域 -->
      <div class="room-detail-card">
        <div class="room-detail-header">
          <div class="room-title">
            {{ isNew ? '新增房间' : '编辑房间' }}
          </div>
        </div>
        <div class="room-detail-body">
          <el-tabs v-model="activeEditTab" type="card" class="edit-tabs">
            <el-tab-pane label="基本信息" name="basic">
              <!-- 基本信息 -->
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="房间主图">
                  <div class="main-image-tip">上传房间主图，建议尺寸 1200×800，图片清晰美观</div>
                  <div class="image-upload-list">
                    <div v-for="(item, index) in roomData.mainImages" :key="index" class="image-thumb">
                      <img :src="item.url || item" />
                      <i class="el-icon-error btndel" @click="handleRemoveMainImg(index)"></i>
                    </div>
                    <div class="upload-thumb" @click="modalPicTap('2')">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="房间标题">
                  <el-input v-model="roomData.title" placeholder="输入房间标题" maxlength="50" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="房间标签">
                  <div class="feature-tags">
                    <el-tag v-for="(tag, index) in roomData.tags" :key="index" closable @close="removeTag(index)">{{ tag
                    }}</el-tag>
                    <el-input class="tag-input" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="房间评分">
                  <div class="score-display">
                    <span class="score-value">{{ roomData.score }}</span>
                    <span class="score-text">超棒</span>
                    <span class="review-count">{{ roomData.scoreCount }}条</span>
                    <el-tooltip content="评分由用户实际评价自动生成，不可手动修改" placement="top">
                      <i class="el-icon-info score-info"></i>
                    </el-tooltip>
                  </div>
                </el-form-item>
                <el-form-item label="房间地址">
                  <div class="address-display">
                    <div class="address-text">{{ roomData.address }}</div>
                    <div class="distance-text">{{ roomData.distance }}</div>
                    <el-tooltip content="地址信息由系统根据位置自动生成，不可手动修改" placement="top">
                      <i class="el-icon-info address-info"></i>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="房屋特色" name="features">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="推荐理由">
                  <el-input v-model="roomData.recommendReason" placeholder="例如：私家花园 享自然生活"></el-input>
                </el-form-item>
                <el-form-item label="特色标签">
                  <div class="feature-tags">
                    <el-tag v-for="(tag, index) in roomData.featureTags" :key="index" closable
                      @close="removeFeatureTag(index)">{{ tag }}</el-tag>
                    <el-input class="tag-input" v-if="featureInputVisible" v-model="featureInputValue"
                      ref="saveFeatureTagInput" size="small" @keyup.enter.native="handleFeatureInputConfirm"
                      @blur="handleFeatureInputConfirm"></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showFeatureInput">+ 新增特色</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="落地窗">
                  <div class="image-upload-list">
                    <div v-for="(item, index) in roomData.windowImages" :key="index" class="image-thumb">
                      <img :src="item.url || item" />
                      <i class="el-icon-error btndel" @click="handleRemoveWindowImg(index)"></i>
                    </div>
                    <div class="upload-thumb" @click="modalPicTap('window')">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="免费停车">
                  <div class="image-upload-list">
                    <div v-for="(item, index) in roomData.parkingImages" :key="index" class="image-thumb">
                      <img :src="item.url || item" />
                      <i class="el-icon-error btndel" @click="handleRemoveParkingImg(index)"></i>
                    </div>
                    <div class="upload-thumb" @click="modalPicTap('parking')">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="入住须知" name="notice">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="地图">
                  <div class="image-upload-list">
                    <div v-for="(item, index) in roomData.location.mapImage" :key="index" class="image-thumb">
                      <img :src="item.url || item" />
                      <i class="el-icon-error btndel" @click="handleRemoveMapImg(index)"></i>
                    </div>
                    <div class="upload-thumb" @click="modalPicTap('map')">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="入住规则">
                  <div class="notice-rules">
                    <div v-for="(rule, index) in roomData.noticeRules" :key="index" class="notice-rule-item">
                      <div class="notice-rule-header">
                        <span class="notice-rule-index">规则 {{ index + 1 }}</span>
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle
                          @click="removeNoticeRule(index)"></el-button>
                      </div>
                      <el-form-item label="规则名称">
                        <el-input v-model="rule.name" placeholder="输入规则名称，如押金、加人"></el-input>
                      </el-form-item>
                      <el-form-item label="规则内容">
                        <el-input v-model="rule.content" placeholder="输入规则内容"></el-input>
                      </el-form-item>
                    </div>
                    <el-button type="primary" icon="el-icon-plus" @click="addNoticeRule">添加规则</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="价格说明">
                  <el-input type="textarea" v-model="roomData.priceNotice" :rows="5" placeholder="输入价格说明"></el-input>
                </el-form-item>
                <el-form-item label="位置信息">
                  <div class="location-info">
                    <el-form-item label="详细地址">
                      <el-input v-model="roomData.location.address" placeholder="输入详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="周边地点">
                      <div class="nearby-pois">
                        <div v-for="(poi, index) in roomData.location.pois" :key="index" class="nearby-poi-item">
                          <el-form-item label="地点名称">
                            <el-input v-model="poi.name" placeholder="输入地点名称"></el-input>
                          </el-form-item>
                          <el-form-item label="距离">
                            <el-input v-model="poi.distance" placeholder="输入距离，如直线距离1.1km"></el-input>
                          </el-form-item>
                          <el-button type="danger" size="mini" icon="el-icon-delete"
                            @click="removePoi(index)"></el-button>
                        </div>
                        <el-button type="primary" size="small" icon="el-icon-plus" @click="addPoi">添加周边地点</el-button>
                      </div>
                    </el-form-item>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="价格设置" name="price">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="当前价格">
                  <el-input-number v-model="roomData.price" :min="0" :step="1"
                    controls-position="right"></el-input-number>
                  <span class="price-unit">元/晚</span>
                </el-form-item>
                <el-form-item label="原价">
                  <el-input-number v-model="roomData.originalPrice" :min="0" :step="1"
                    controls-position="right"></el-input-number>
                  <span class="price-unit">元/晚</span>
                </el-form-item>
                <el-form-item label="折扣">
                  <el-input-number v-model="roomData.discount" :min="0" :max="10" :precision="1"
                    :step="0.1"></el-input-number>
                  <span class="price-unit">折</span>
                </el-form-item>
                <el-form-item label="预订时间">
                  <el-date-picker v-model="roomData.bookingDate" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <div class="form-actions">
            <el-button type="primary" @click="save_Room">保存</el-button>
            <el-button @click="goBack">取消</el-button>
          </div>
        </div>
      </div>

      <!-- 右侧手机预览区域 -->
      <div class="phone-preview">
        <div class="phone-header">
          <span>10:29</span>
          <span>94% <i class="el-icon-mobile-phone"></i></span>
        </div>
        <div class="phone-container" @scroll="handleScroll" ref="phoneContainer">
          <div class="phone-content">
            <!-- 顶部标签导航 - 固定在顶部 -->
            <div class="phone-top-nav">
              <div class="phone-back-icon">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="phone-top-title">{{ currentTabName }}</div>
              <div class="phone-top-actions">
                <i class="el-icon-star-off"></i>
                <i class="el-icon-share"></i>
                <span class="more-dots">•••</span>
                <span class="circle-icon">⦿</span>
              </div>
            </div>

            <!-- 标签导航 - 可横向滚动，点击时会滚动到对应区域 -->
            <div class="phone-tab-nav">
              <div v-for="tab in tabs" :key="tab.id" class="phone-tab-item" :class="{ active: activeTab === tab.id }"
                @click="scrollToSection(tab.id)">
                {{ tab.name }}
              </div>
            </div>

            <!-- 概览区域 - id为对应的section标识 -->
            <div id="overview-section" class="phone-section">
              <!-- 顶部图片 -->
              <div class="phone-top-image">
                <img src="https://picsum.photos/id/1019/800/600" alt="房间照片" />
              </div>

              <!-- 房间信息卡片 -->
              <div class="phone-room-card">
                <div class="phone-room-title">
                  {{ roomData.title || '【才村/龙塘码头】顺柿亲子房+设计师院落，独立咖啡厅；出门200米龙塘码头+网红打卡' }}
                </div>

                <div class="phone-room-tag-main">
                  <span class="tag-main">优选民宿</span>
                  <span class="desc">干净卫生有亮点，入住不满意必赔</span>
                </div>

                <div class="phone-room-tags">
                  <span class="phone-tag" v-for="(tag, index) in roomData.tags" :key="index">{{ tag }}</span>
                </div>

                <div class="phone-score-address">
                  <div class="phone-score">
                    <span class="score-num">{{ roomData.score }}</span>
                    <span class="score-text">超棒</span>
                    <span class="review-count">{{ roomData.scoreCount }}条</span>
                  </div>
                  <div class="phone-address">
                    {{ roomData.address }}
                  </div>
                  <div class="phone-distance">
                    <span class="distance-text">{{ roomData.distance }}</span>
                    <span class="map-link">地图</span>
                  </div>
                </div>
              </div>

              <!-- 房屋特色 -->
              <div class="phone-features">
                <div class="feature-title">房屋特色</div>
                <div class="feature-recommend">
                  <span class="recommend-label">推荐理由：</span>
                  <span class="recommend-content">"{{ roomData.recommendReason || '私家花园 享自然生活' }}"</span>
                </div>

                <div class="feature-item">
                  <div class="feature-item-title">落地窗</div>
                  <div class="feature-item-desc">观蓝天白云</div>
                  <div class="feature-item-image" v-if="roomData.windowImages && roomData.windowImages.length > 0">
                    <img :src="roomData.windowImages[0].url" alt="落地窗" />
                  </div>
                </div>

                <div class="feature-item" v-if="roomData.freeParking">
                  <div class="feature-item-title">免费停车</div>
                  <div class="feature-item-desc">有免费停车场</div>
                  <div class="feature-item-image" v-if="roomData.parkingImages && roomData.parkingImages.length > 0">
                    <img :src="roomData.parkingImages[0].url" alt="停车场" />
                  </div>
                </div>
              </div>
            </div>

            <!-- 点评标签页 -->
            <div id="reviews-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">点评</div>

              <div class="phone-reviews">
                <div class="reviews-header">
                  <div class="reviews-score">
                    <div class="total-score">
                      <span class="score-big">{{ roomData.score }}</span>
                      <span class="score-label">超棒</span>
                    </div>
                    <div class="score-details">
                      <div class="score-item">
                        <span class="score-name">描述</span>
                        <span class="score-value">{{ roomData.scoreDetails.description }}</span>
                      </div>
                      <div class="score-item">
                        <span class="score-name">位置</span>
                        <span class="score-value">{{ roomData.scoreDetails.location }}</span>
                      </div>
                      <div class="score-item">
                        <span class="score-name">便捷</span>
                        <span class="score-value">{{ roomData.scoreDetails.convenience }}</span>
                      </div>
                      <div class="score-item">
                        <span class="score-name">服务</span>
                        <span class="score-value">{{ roomData.scoreDetails.service }}</span>
                      </div>
                      <div class="score-item">
                        <span class="score-name">卫生</span>
                        <span class="score-value">{{ roomData.scoreDetails.cleanliness }}</span>
                      </div>
                      <div class="score-item">
                        <span class="score-name">性价比</span>
                        <span class="score-value">{{ roomData.scoreDetails.value }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="review-item" v-for="(review, index) in roomData.reviews" :key="index">
                  <div class="reviewer">
                    <img
                      :src="review.avatar && review.avatar.length > 0 ? review.avatar[0].url : 'https://picsum.photos/id/1001/40/40'"
                      alt="用户头像" class="reviewer-avatar">
                    <div class="reviewer-info">
                      <div class="reviewer-name">{{ review.username }}</div>
                      <div class="review-date">{{ review.date }}入住</div>
                    </div>
                  </div>

                  <div class="review-content">
                    {{ review.content }}
                  </div>

                  <div class="review-images" v-if="review.images && review.images.length > 0">
                    <img v-for="(image, imgIndex) in review.images" :key="imgIndex" :src="image.url"
                      class="review-image">
                  </div>
                </div>

                <div class="review-more">
                  全部{{ roomData.scoreCount }}条 >
                </div>
              </div>
            </div>

            <!-- 服务设施标签页 -->
            <div id="facilities-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">设施</div>

              <div class="phone-facilities">
                <div class="facilities-section">
                  <div class="facilities-subtitle">服务/设施</div>
                  <div class="facilities-subtitle-small">服务</div>

                  <div class="facilities-list">
                    <div class="facility-item" v-for="(facility, index) in roomData.serviceFacilities" :key="index">
                      <i :class="facility.available ? 'el-icon-check facility-icon success' : 'el-icon-close facility-icon muted' > </i>
                        < span class=" facility-name">{{ facility.name }}</span>
                    </div>
                  </div>

                  <div class="facilities-subtitle-small">基础</div>
                  <div class="facilities-list">
                    <div class="facility-item" v-for="(facility, index) in roomData.basicFacilities" :key="index">
                      <i :class="facility.available ? 'el-icon-check facility-icon success' : 'el-icon-close facility-icon muted' > </i>
                        < span class=" facility-name">{{ facility.name }}</span>
                    </div>
                  </div>

                  <div class="facilities-subtitle-small">卫浴</div>
                  <div class="facilities-list">
                    <div class="facility-item" v-for="(facility, index) in roomData.bathroomFacilities" :key="index">
                      <i :class="facility.available ? 'el-icon-check facility-icon success' : 'el-icon-close facility-icon muted' > </i>
                        < span class=" facility-name">{{ facility.name }}</span>
                    </div>
                  </div>

                  <div class="facilities-view-all">
                    全部设施 >
                  </div>
                </div>
              </div>
            </div>

            <!-- 房东介绍标签页 -->
            <div id="landlord-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">房东</div>

              <div class="phone-landlord">
                <div class="landlord-info">
                  <img
                    :src="roomData.landlord.avatar && roomData.landlord.avatar.length > 0 ? roomData.landlord.avatar[0].url : 'https://picsum.photos/id/1005/100/100'"
                    class="landlord-avatar" alt="房东头像">
                  <div class="landlord-detail">
                    <div class="landlord-name">{{ roomData.landlord.name }}</div>
                    <div class="landlord-desc">{{ roomData.landlord.description }}</div>
                  </div>
                  <div class="landlord-contact">
                    <button class="contact-btn">联系房东</button>
                  </div>
                </div>

                <div class="landlord-stats">
                  <div class="stat-item">
                    <div class="stat-value">{{ roomData.landlord.positiveRate }}%</div>
                    <div class="stat-label">好评率</div>
                    <div class="stat-desc">共{{ roomData.landlord.reviewCount }}条点评</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ roomData.landlord.confirmRate }}%</div>
                    <div class="stat-label">订单确认率</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 费用须知标签页 -->
            <div id="notice-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">须知</div>

              <div class="phone-notice">
                <div class="notice-section">
                  <div class="notice-desc">以下规则由房东制定，请仔细阅读并遵守</div>

                  <div class="notice-item" v-for="(rule, index) in roomData.noticeRules" :key="index">
                    <div class="notice-label">{{ rule.name }}</div>
                    <div class="notice-value">{{ rule.content }}</div>
                  </div>

                  <div class="notice-more">
                    全部须知 >
                  </div>
                </div>

                <div class="notice-section">
                  <div class="notice-title">价格说明</div>
                  <div class="notice-content">
                    {{ roomData.priceNotice }}
                  </div>
                </div>

                <div class="notice-section">
                  <div class="notice-title">位置</div>
                  <div class="notice-map">
                    <img
                      :src="roomData.location.mapImage && roomData.location.mapImage.length > 0 ? roomData.location.mapImage[0].url : 'https://picsum.photos/id/1028/600/300'"
                      alt="地图" class="map-image">
                    <div class="map-address">
                      <div class="map-icon">📍</div>
                      <div class="map-text">{{ roomData.location.address }}</div>
                      <div class="map-copy">复制</div>
                    </div>

                    <div class="map-tabs">
                      <div class="map-tab">交通</div>
                      <div class="map-tab active">景点</div>
                      <div class="map-tab">购物</div>
                    </div>

                    <div class="map-pois">
                      <div class="map-poi" v-for="(poi, index) in roomData.location.pois" :key="index">
                        <div class="poi-name">{{ poi.name }}</div>
                        <div class="poi-distance">{{ poi.distance }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空白区域，防止底部导航遮挡内容 -->
              <div style="height: 70px;"></div>
            </div>

            <!-- 房源标签页 -->
            <div id="rooms-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">房源</div>

              <div class="phone-recommend">
                <div class="recommend-title">
                  <span>周边民宿推荐</span>
                  <span class="recommend-more">查看全部</span>
                </div>

                <div class="recommend-list">
                  <div class="recommend-card" v-for="(room, index) in roomData.nearbyRooms" :key="index">
                    <div class="recommend-image">
                      <img
                        :src="room.images && room.images.length > 0 ? room.images[0].url : 'https://picsum.photos/id/1040/300/200'"
                        alt="推荐房间">
                    </div>
                    <div class="recommend-distance">{{ room.distance }}</div>
                    <div class="recommend-name">{{ room.name }}</div>
                    <div class="recommend-score">
                      <div class="recommend-score-badge">超赞</div>
                      <div class="recommend-score-num">{{ room.score }}分</div>
                      <div class="recommend-score-count">({{ room.scoreCount }})</div>
                    </div>
                    <div class="recommend-tags">
                      <div class="recommend-tag" v-for="(tag, tagIndex) in room.tags.split(',')" :key="tagIndex">{{ tag
                      }}</div>
                    </div>
                    <div class="recommend-price">
                      <span class="recommend-current">¥{{ room.price }}</span>
                      <span class="recommend-original">¥{{ room.originalPrice }}</span>
                      <span class="recommend-discount">{{ room.discount }}折</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空白区域，防止底部导航遮挡内容 -->
              <div style="height: 70px;"></div>
            </div>

            <!-- 底部栏 -->
            <div class="phone-bottom-bar">
              <div class="bottom-user">
                <img
                  :src="roomData.landlord.avatar && roomData.landlord.avatar.length > 0 ? roomData.landlord.avatar[0].url : 'https://picsum.photos/id/1005/40/40'"
                  alt="头像" class="user-avatar" />
                <span class="user-consult">咨询</span>
              </div>

              <div class="bottom-price">
                <div class="price-amount">¥{{ roomData.price }}</div>
                <div class="price-desc">共2晚 {{ roomData.bookingDate && roomData.bookingDate.length > 1 ?
                  roomData.bookingDate[0] + ' — ' + roomData.bookingDate[1] : '2025-— 2025-—' }}</div>
              </div>

              <div class="bottom-book-btn">
                立即预订
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from '@/components/uploadImg';
import { roomCreate, roomDetail,roomUpdate } from "@/api/mings";

export default {
  name: 'RoomTitleDetail',
  props: {},
  data() {
    return {
      roomId: null,
      isNew: false,
      roomTitle: '',
      // 手机预览激活的标签
      activeTab: 'overview',
      // 标签列表
      tabs: [
        { id: 'overview', name: '概览' },
        { id: 'rooms', name: '房源' },
        { id: 'reviews', name: '点评' },
        { id: 'facilities', name: '设施' },
        { id: 'landlord', name: '房东' },
        { id: 'notice', name: '须知' }
      ],
      // 保存各个区域的位置信息
      sectionPositions: {},
      // 是否正在通过点击Tab导航进行滚动
      isScrollingToSection: false,
      // 房间特色数据
      roomFeatures: {
        recommendReason: '私家花园 享自然生活',
        freeParking: true
      },
      featureTags: ['观蓝天白云', '私家花园', '独立院落'],
      inputVisible: false,
      inputValue: '',
      windowImageList: [{
        name: 'window.jpg',
        url: 'https://picsum.photos/id/1019/600/400'
      }],
      parkingImageList: [{
        name: 'parking.jpg',
        url: 'https://picsum.photos/id/1018/600/400'
      }],
      // 新增编辑数据
      roomData: {
        title: '',
        tags: ['优选民宿', '干净卫生'],
        score: 5.0,
        scoreCount: 11,
        address: '大理市, 大理州大理市柿野SHIYI...',
        distance: '距才村直线3.4公里',
        recommendReason: '私家花园 享自然生活',
        featureTags: ['观蓝天白云', '私家花园', '独立院落'],
        hasWindow: true,
        freeParking: true,
        windowImages: [],
        parkingImages: [],
        nearbyRooms: [
          {
            name: '【才村/高铁站】大理&顺柿精品院落|独立花园家庭影院',
            images: [{
              name: 'nearby1.jpg',
              url: 'https://picsum.photos/id/1040/300/200'
            }],
            distance: '距离1.3km',
            score: 5.0,
            scoreCount: 112,
            tags: '别墅,设计师房',
            price: 468,
            originalPrice: 568,
            discount: 8.2
          },
          {
            name: '【环境清幽】大理洱海临海小木屋|湖景小院，超近洱海',
            images: [{
              name: 'nearby2.jpg',
              url: 'https://picsum.photos/id/1041/300/200'
            }],
            distance: '距离1.8km',
            score: 4.9,
            scoreCount: 98,
            tags: '木屋,湖景,情侣首选',
            price: 528,
            originalPrice: 698,
            discount: 7.6
          }
        ],
        scoreDetails: {
          description: 4.9,
          location: 5.0,
          convenience: 5.0,
          service: 5.0,
          cleanliness: 5.0,
          value: 5.0
        },
        reviews: [
          {
            username: 'j***5',
            avatar: [{
              name: 'reviewer1.jpg',
              url: 'https://picsum.photos/id/1001/40/40'
            }],
            date: '2025-03-01',
            content: '酒店特别好，服务很好，离海边很近，还有下午茶',
            images: [
              { name: 'review1.jpg', url: 'https://picsum.photos/id/1019/150/100' },
              { name: 'review2.jpg', url: 'https://picsum.photos/id/1018/150/100' }
            ]
          },
          {
            username: 't***8',
            avatar: [{
              name: 'reviewer2.jpg',
              url: 'https://picsum.photos/id/1002/40/40'
            }],
            date: '2025-02-15',
            content: '环境很棒，老板人很热情，周围环境很安静，适合度假',
            images: []
          }
        ],
        serviceFacilities: [
          { name: '免费停车位', available: true },
          { name: '付费停车位', available: false },
          { name: '行李寄存', available: false }
        ],
        basicFacilities: [
          { name: '无线网络', available: true },
          { name: '电梯', available: false },
          { name: '窗户', available: true }
        ],
        bathroomFacilities: [
          { name: '热水', available: true },
          { name: '独立卫浴', available: true },
          { name: '电吹风', available: true }
        ],
        landlord: {
          name: '小张民宿',
          avatar: [{
            name: 'landlord.jpg',
            url: 'https://picsum.photos/id/1005/100/100'
          }],
          description: '自然人房东 实名验证 5套房屋',
          contact: '13800138000',
          positiveRate: 100,
          confirmRate: 100,
          reviewCount: 107
        },
        noticeRules: [
          { name: '押金', content: '免押入住，订房更轻松' },
          { name: '加人', content: '标准入住3人，不可加人' }
        ],
        priceNotice: '划线价格为参考价，该价格指商品或服务的门市价、服务提供商的指导价、零售价或该商品或服务曾经展示过的销售价等，并非原价；由于产品信息实时更新、市场价格波动等可能会与您预订时展示的不一致，该价格仅供您参考。未划线价格指商品或服务的实时价格，为划线价格基础上计算出的优惠金额。具体成交价格根据商品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。如有疑问，您可在预订前联系客服进行咨询。此说明仅当出现价格比较时有效。若服务提供商单独对划线价格进行说明的，以服务提供商的表述为准。',
        location: {
          address: '大理州大理市柿野SHIYE-日落天台岸...',
          mapImage: [],
          pois: [
            { name: '龙塘码头-观景台', distance: '直线距离785m' },
            { name: '龙塘村', distance: '直线距离1.1km' },
            { name: '才村', distance: '直线距离3.4km' }
          ]
        },
        price: 868,
        originalPrice: 1000,
        discount: 8.7,
        bookingDate: ['2025-04-01', '2025-04-05'],
        mainImages: [], // 必须是数组
      },
      activeEditTab: 'basic', // 新增：控制编辑区域当前激活的标签页
      inputVisible: false, // 新增：控制基本信息标签页的输入框可见性
      inputValue: '', // 新增：基本信息标签页的输入框值
      featureInputVisible: false, // 新增：控制房屋特色标签页的输入框可见性
      featureInputValue: '', // 新增：房屋特色标签页的输入框值
      featureTags: ['观蓝天白云', '私家花园', '独立院落'], // 新增：房屋特色标签
      roomFeatures: { // 新增：房屋特色数据
        recommendReason: '私家花园 享自然生活',
        freeParking: true
      },
      windowImageList: [],
      parkingImageList: [],
      nearbyRooms: [ // 新增：周边房源列表
        {
          name: '【才村/高铁站】大理&顺柿精品院落|独立花园家庭影院',
          images: [{
            name: 'nearby1.jpg',
            url: 'https://picsum.photos/id/1040/300/200'
          }],
          distance: '距离1.3km',
          score: 5.0,
          scoreCount: 112,
          tags: '别墅,设计师房',
          price: 468,
          originalPrice: 568,
          discount: 8.2
        },
        {
          name: '【环境清幽】大理洱海临海小木屋|湖景小院，超近洱海',
          images: [{
            name: 'nearby2.jpg',
            url: 'https://picsum.photos/id/1041/300/200'
          }],
          distance: '距离1.8km',
          score: 4.9,
          scoreCount: 98,
          tags: '木屋,湖景,情侣首选',
          price: 528,
          originalPrice: 698,
          discount: 7.6
        }
      ],
      scoreDetails: { // 新增：房间评分详情
        description: 4.9,
        location: 5.0,
        convenience: 5.0,
        service: 5.0,
        cleanliness: 5.0,
        value: 5.0
      },
      reviews: [ // 新增：用户点评列表
        {
          username: 'j***5',
          avatar: [{
            name: 'reviewer1.jpg',
            url: 'https://picsum.photos/id/1001/40/40'
          }],
          date: '2025-03-01',
          content: '酒店特别好，服务很好，离海边很近，还有下午茶',
          images: [
            { name: 'review1.jpg', url: 'https://picsum.photos/id/1019/150/100' },
            { name: 'review2.jpg', url: 'https://picsum.photos/id/1018/150/100' }
          ]
        },
        {
          username: 't***8',
          avatar: [{
            name: 'reviewer2.jpg',
            url: 'https://picsum.photos/id/1002/40/40'
          }],
          date: '2025-02-15',
          content: '环境很棒，老板人很热情，周围环境很安静，适合度假',
          images: []
        }
      ],
      serviceFacilities: [ // 新增：服务类设施列表
        { name: '免费停车位', available: true },
        { name: '付费停车位', available: false },
        { name: '行李寄存', available: false }
      ],
      basicFacilities: [ // 新增：基础设施列表
        { name: '无线网络', available: true },
        { name: '电梯', available: false },
        { name: '窗户', available: true }
      ],
      bathroomFacilities: [ // 新增：卫浴设施列表
        { name: '热水', available: true },
        { name: '独立卫浴', available: true },
        { name: '电吹风', available: true }
      ],
      landlord: { // 新增：房东信息
        name: '小张民宿',
        avatar: [{
          name: 'landlord.jpg',
          url: 'https://picsum.photos/id/1005/100/100'
        }],
        description: '自然人房东 实名验证 5套房屋',
        contact: '13800138000',
        positiveRate: 100,
        confirmRate: 100,
        reviewCount: 107
      },
      noticeRules: [ // 新增：入住须知规则列表
        { name: '押金', content: '免押入住，订房更轻松' },
        { name: '加人', content: '标准入住3人，不可加人' }
      ],
      priceNotice: '划线价格为参考价，该价格指商品或服务的门市价、服务提供商的指导价、零售价或该商品或服务曾经展示过的销售价等，并非原价；由于产品信息实时更新、市场价格波动等可能会与您预订时展示的不一致，该价格仅供您参考。未划线价格指商品或服务的实时价格，为划线价格基础上计算出的优惠金额。具体成交价格根据商品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。如有疑问，您可在预订前联系客服进行咨询。此说明仅当出现价格比较时有效。若服务提供商单独对划线价格进行说明的，以服务提供商的表述为准。',
      location: { // 新增：位置信息
        address: '大理州大理市柿野SHIYE-日落天台岸...',
        mapImage: [{
          name: 'map.jpg',
          url: 'https://picsum.photos/id/1028/600/300'
        }],
        pois: [
          { name: '龙塘码头-观景台', distance: '直线距离785m' },
          { name: '龙塘村', distance: '直线距离1.1km' },
          { name: '才村', distance: '直线距离3.4km' }
        ]
      },
      price: 868,
      originalPrice: 1000,
      discount: 8.7,
      bookingDate: ['2025-04-01', '2025-04-05'],
      mainImages: [ // 新增：房间主图列表
        {
          required: true,
          message: '请上传商品轮播图',
          type: 'array',
          trigger: 'change'
        }
      ],
      detailImages: [ // 新增：房间详情图列表
        { name: 'detail1.jpg', url: 'https://picsum.photos/id/1004/300/200' },
        { name: 'detail2.jpg', url: 'https://picsum.photos/id/1005/300/200' },
        { name: 'detail3.jpg', url: 'https://picsum.photos/id/1006/300/200' },
        { name: 'detail4.jpg', url: 'https://picsum.photos/id/1007/300/200' },
        { name: 'detail5.jpg', url: 'https://picsum.photos/id/1008/300/200' }
      ],
      dragging: null,
    };
  },
  computed: {
    currentTabName() {
      const tab = this.tabs.find(t => t.id === this.activeTab);
      return tab ? tab.name : '概览';
    }
  },
  created() {
    if (this.$route.params.id && this.$route.params.id !== 'new') {
      this.roomId = this.$route.params.id;
      this.getRoomDetail();
      this.isNew = false;
    } else {
      this.isNew = true;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calculateSectionPositions();
      window.addEventListener('resize', this.calculateSectionPositions);

      // 设置初始房间标题
      if (this.roomData.title === '') {
        this.roomData.title = '【才村/龙塘码头】顺柿亲子房+设计师院落，独立咖啡厅；出门200米龙塘码头+网红打卡';
      }
    });

    // 监听手机预览区的滚动事件
    const phoneContainer = document.querySelector('.phone-content-scroll');
    if (phoneContainer) {
      phoneContainer.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateSectionPositions);
    const phoneContainer = document.querySelector('.phone-content-scroll');
    if (phoneContainer) {
      phoneContainer.removeEventListener('scroll', this.handleScroll);
    }
  },
  methods: {
    getRoomDetail() {
      var that = this
      roomDetail(this.roomId)
        .then(res => {
          console.log(res.data);
          that.roomData = res.data;
        })
        .catch(err => {
          that.$message.error('获取房间详情失败');
        });
    },
    modalPicTap(type) {
      const _this = this;
      this.$modalUpload(function (img) {
        if (type === '2') {
          img.forEach(item => {
            console.log(item);
            _this.roomData.mainImages.push(item);
            if (_this.roomData.mainImages.length > 10) {
              _this.roomData.mainImages.length = 10;
            }
          });
        } else if (type === 'window') {
          img.forEach(item => {
            console.log(item);
            _this.roomData.windowImages.push(item);
            if (_this.roomData.windowImages.length > 1) {
              _this.roomData.windowImages.length = 1;
            }
          });
        } else if (type === 'parking') {
          img.forEach(item => {
            _this.roomData.parkingImages.push(item);
            if (_this.roomData.parkingImages.length > 1) {
              _this.roomData.parkingImages.length = 1;
            }
          });
        } else if (type === 'map') {
          img.forEach(item => {
            _this.roomData.location.mapImage.push(item);
            if (_this.roomData.location.mapImage.length > 1) {
              _this.roomData.location.mapImage.length = 1;
            }
          });
        }
      }, type);
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleRemoveMainImg(index) {
      this.roomData.mainImages.splice(index, 1);
    },
    handleRemoveWindowImg(index) {
      this.roomData.windowImages.splice(index, 1);
    },
    handleRemoveParkingImg(index) {
      this.roomData.parkingImages.splice(index, 1);
    },
    handleRemoveMapImg(index) {
      this.roomData.location.mapImage.splice(index, 1);
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.roomData.mainImages];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.roomData.mainImages = newItems;
    },
    initData() {
      // 从路由参数获取房间ID
      this.roomId = this.$route.params.id;
      this.isNew = this.roomId === 'new';

      if (!this.isNew) {
        // 如果是编辑已有房间，从后端获取数据
        // 模拟从后端获取数据
        // getRoomById(this.roomId).then(res => {
        //   this.roomData = res.data;
        // });
      }
    },
    calculateSectionPositions() {
      this.sectionPositions = {};
      const sections = ['overview', 'rooms', 'reviews', 'facilities', 'landlord', 'notice'];

      sections.forEach(sectionId => {
        const element = document.getElementById(`${sectionId}-section`);
        if (element) {
          // 获取每个区域相对于父元素的顶部偏移量
          const position = element.offsetTop;
          this.sectionPositions[sectionId] = position;
        }
      });
    },
    handleScroll(e) {
      if (this.isScrollingToSection) return;

      const scrollTop = e.target.scrollTop;
      const headerHeight = 44; // 手机顶部状态栏高度

      let activeSection = 'overview';

      // 根据滚动位置确定当前浏览的区域
      Object.entries(this.sectionPositions).forEach(([sectionId, position]) => {
        if (scrollTop + headerHeight >= position - 20) {
          activeSection = sectionId;
        }
      });

      if (this.activeTab !== activeSection) {
        this.activeTab = activeSection;

        // 确保选中的标签在视图中可见
        this.$nextTick(() => {
          const tabElement = document.querySelector(`.tab-item.${activeSection}`);
          if (tabElement) {
            tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
          }
        });
      }
    },
    scrollToSection(sectionId) {
      const phoneContainer = document.querySelector('.phone-content-scroll');
      const targetSection = document.getElementById(`${sectionId}-section`);

      if (phoneContainer && targetSection) {
        const headerHeight = 44; // 手机顶部状态栏高度
        this.isScrollingToSection = true;

        phoneContainer.scrollTo({
          top: targetSection.offsetTop - headerHeight,
          behavior: 'smooth'
        });

        this.activeTab = sectionId;

        // 滚动完成后恢复滚动监听
        setTimeout(() => {
          this.isScrollingToSection = false;
        }, 1000);
      }
    },
    goBack() {
      this.$router.push('/mings/list');
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.roomData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    removeTag(index) {
      this.roomData.tags.splice(index, 1);
    },
    // 房屋特色相关方法
    showFeatureInput() {
      this.featureInputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveFeatureTagInput.$refs.input.focus();
      });
    },
    handleFeatureInputConfirm() {
      let inputValue = this.featureInputValue;
      if (inputValue) {
        this.roomData.featureTags.push(inputValue);
      }
      this.featureInputVisible = false;
      this.featureInputValue = '';
    },
    removeFeatureTag(index) {
      this.roomData.featureTags.splice(index, 1);
    },

    // 设施管理相关方法
    addFacility(list) {
      list.push({ name: '', available: true });
    },
    removeFacility(list, index) {
      list.splice(index, 1);
    },
    // 入住须知相关方法
    addNoticeRule() {
      this.roomData.noticeRules.push({ name: '', content: '' });
    },
    removeNoticeRule(index) {
      this.roomData.noticeRules.splice(index, 1);
    },
    // 位置信息相关方法
    addPoi() {
      this.roomData.location.pois.push({ name: '', distance: '' });
    },
    removePoi(index) {
      this.roomData.location.pois.splice(index, 1);
    },
    // 保存房间
    save_Room() {
      if (!this.roomData.mainImages || this.roomData.mainImages.length == 0) {
        this.$message.error('请上传房间主图');
        return;
      }
      // 实际项目中应该调用后端API保存数据
      this.roomData.id = this.roomId; // 如果有ID，则更新，否则新增
      if (this.roomData.id) {
        roomUpdate(this.roomData.id,this.roomData).then(res => {
          this.$message.success('房间保存成功');
        }).catch(err => {
          this.$message.error('房间保存失败');
        });
      } else {
        roomCreate(this.roomData).then(res => {
          this.$message.success('房间保存成功');
        }).catch(err => {
          this.$message.error('房间保存失败');
        });
      }
    },
    handleMainImgUpload(list) {
      // list为图片url数组
      this.roomData.mainImages = list.map(url => typeof url === 'string' ? { url } : url);
    }
  },
  components: {
    UploadImg
  }
}
</script>

<style scoped>
.room-detail-container {
  background: #f4f6fa;
  min-height: 100vh;
  padding: 0;
}

.sub-navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 1;
}

.room-detail-wrapper {
  display: flex;
  gap: 32px;
  margin: 0 32px;
  padding-top: 32px;
}

.room-detail-card {
  flex: 1 1 340px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 32px 32px 24px 32px;
  margin-right: 0;
  overflow-y: auto;
  max-width: 700px;
  min-width: 320px;
  min-height: 400px;
}

.room-detail-header {
  margin-bottom: 20px;
}

.room-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  line-height: 1.4;
}

.edit-tabs {
  margin-top: 16px;
}

.edit-form {
  margin-top: 24px;
}

.edit-form .el-form-item {
  margin-bottom: 24px;
}

.edit-form .el-form-item__label {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.edit-form .el-input,
.edit-form .el-input-number,
.edit-form .el-select {
  border-radius: 8px;
  font-size: 15px;
}

.form-actions {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.form-actions .el-button {
  min-width: 100px;
  border-radius: 20px;
  font-size: 15px;
  margin-left: 12px;
}

.score-label {
  margin-left: 15px;
  margin-right: 5px;
}

/* 房屋特色相关 */
.feature-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.feature-tags .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.tag-input {
  width: 120px;
  margin-right: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.feature-desc {
  margin-left: 10px;
  color: #666;
}

.feature-image-upload {
  margin-top: 10px;
}

/* 周边房源 */
.nearby-rooms {
  margin-bottom: 20px;
}

.nearby-room-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.nearby-room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.nearby-room-index {
  font-weight: bold;
  color: #409EFF;
}

/* 评分详情 */
.score-details-edit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.score-detail-item {
  display: flex;
  align-items: center;
}

.score-detail-item span {
  width: 80px;
  margin-right: 10px;
}

/* 用户点评 */
.user-review-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.user-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-review-index {
  font-weight: bold;
  color: #409EFF;
}

/* 设施管理 */
.facilities-list-edit {
  margin-bottom: 15px;
}

.facility-item-edit {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.facility-item-edit .el-checkbox {
  margin-right: 10px;
}

.facility-item-edit .el-input {
  width: 200px;
  margin-right: 10px;
}

/* 房东信息 */
.positive-rate-suffix {
  margin-left: 5px;
}

/* 入住须知 */
.notice-rules {
  margin-bottom: 20px;
}

.notice-rule-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.notice-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.notice-rule-index {
  font-weight: bold;
  color: #409EFF;
}

/* 位置信息 */
.location-info {
  margin-top: 10px;
}

.nearby-poi-item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}

.nearby-poi-item .el-form-item {
  margin-right: 10px;
  margin-bottom: 0;
}

.nearby-poi-item .el-form-item:first-child {
  flex: 2;
}

.nearby-poi-item .el-form-item:nth-child(2) {
  flex: 1;
}

/* 价格设置 */
.price-unit {
  margin-left: 5px;
  color: #606266;
}

/* 表单操作按钮 */
.form-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  text-align: center;
}

/* 右侧手机预览区域 - 全新改版，符合截图样式 */
.phone-preview {
  width: 375px;
  background: #2a2a2a;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  position: relative;
}

.phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 5px 20px;
  font-size: 14px;
}

.phone-container {
  border-radius: 30px;
  height: 780px;
  overflow-y: auto;
  background: white;
  position: relative;
  scroll-behavior: smooth;
}

/* 隐藏滚动条但允许滚动 */
.phone-container::-webkit-scrollbar {
  display: none;
}

.phone-content {
  position: relative;
}

/* 顶部图片 */
.phone-top-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.phone-top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 返回、收藏分享和更多按钮 */
.phone-back-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.phone-action-btns {
  position: absolute;
  top: 100px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  z-index: 5;
}

.action-btn {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  cursor: pointer;
}

.phone-more-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  background: white;
  border-radius: 20px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 5;
}

.more-dots {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

.more-circle {
  width: 20px;
  height: 20px;
  background: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 房间信息卡片 */
.phone-room-card {
  background: white;
  border-radius: 15px;
  margin: -15px 15px 0;
  padding: 15px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.phone-room-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.4;
}

.phone-room-tag-main {
  margin-bottom: 10px;
}

.phone-room-tag-main .tag-main {
  background: #fff2e8;
  color: #ff6b35;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.phone-room-tag-main .desc {
  font-size: 13px;
}

.phone-room-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.phone-tag {
  background: #f5f5f5;
  color: #333;
  padding: 3px 10px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.phone-score-address {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.phone-score {
  margin-bottom: 5px;
}

.phone-score .score-num {
  color: #ff6b35;
  font-size: 18px;
  font-weight: bold;
}

.phone-score .score-text {
  color: #ff6b35;
  margin-left: 5px;
}

.phone-score .review-count {
  color: #999;
  margin-left: 5px;
  font-size: 13px;
}

.phone-address {
  color: #333;
  margin-bottom: 5px;
  font-size: 14px;
}

.phone-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.distance-text {
  color: #999;
}

.map-link {
  color: #3498db;
}

/* 手机区域分区块样式 */
.phone-section {
  padding: 0 15px;
  position: relative;
}

.section-divider {
  height: 10px;
  background: #f5f5f5;
  margin: 20px -15px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
  color: #333;
}

/* 房屋特色 */
.phone-features {
  background: white;
  border-radius: 15px;
  margin: 15px 0;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.feature-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.feature-recommend {
  background: #fff2e8;
  padding: 12px;
  border-radius: 8px;
  color: #ff6b35;
  margin-bottom: 15px;
  font-size: 14px;
}

.recommend-label {
  font-weight: 500;
}

.feature-item {
  margin-bottom: 20px;
}

.feature-item-title {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 15px;
}

.feature-item-desc {
  color: #666;
  font-size: 13px;
  margin-bottom: 8px;
}

.feature-item-image {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}

.feature-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 底部栏 */
.phone-bottom-bar {
  position: fixed;
  bottom: 10px;
  width: 355px;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  z-index: 20;
}

.bottom-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 3px;
}

.user-consult {
  font-size: 12px;
  color: #666;
}

.bottom-price {
  flex: 1;
}

.price-amount {
  color: #ff6b35;
  font-size: 20px;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #999;
}

.bottom-book-btn {
  background: #ff6b35;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
}

/* 顶部导航 */
.phone-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 30;
}

.phone-back-icon {
  font-size: 18px;
  color: #333;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-top-title {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.phone-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #666;
}

.circle-icon {
  width: 20px;
  height: 20px;
  background: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 标签导航 */
.phone-tab-nav {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  background: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 48px;
  z-index: 20;
}

.phone-tab-nav::-webkit-scrollbar {
  display: none;
}

.phone-tab-item {
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.phone-tab-item.active {
  color: #333;
  font-weight: bold;
}

.phone-tab-item.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  background: #333;
}

/* 服务设施样式 */
.phone-facilities {
  padding: 15px 0;
}

.facilities-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.facilities-section {
  margin-bottom: 20px;
}

.facilities-subtitle {
  font-size: 15px;
  font-weight: 500;
  color: #555;
  margin-bottom: 10px;
}

.facilities-subtitle-small {
  font-size: 13px;
  color: #888;
  margin-top: 10px;
}

.facilities-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.facility-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 8px;
}

.facility-icon {
  font-size: 20px;
  margin-right: 8px;
}

.facility-icon.success {
  color: #67c23a;
  /* 绿色 */
}

.facility-icon.muted {
  color: #909399;
  /* 灰色 */
}

.facility-name {
  font-size: 14px;
  color: #333;
}

.facilities-view-all {
  text-align: right;
  margin-top: 15px;
  font-size: 14px;
  color: #3498db;
}

/* 房东介绍样式 */
.phone-landlord {
  padding: 15px 0;
}

.landlord-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.landlord-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.landlord-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.landlord-detail {
  flex: 1;
}

.landlord-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.landlord-desc {
  font-size: 13px;
  color: #666;
}

.landlord-contact {
  text-align: right;
}

.contact-btn {
  background: #ff6b35;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.landlord-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #666;
}

.stat-desc {
  font-size: 12px;
  color: #999;
}

/* 房客点评样式 */
.phone-reviews {
  padding: 15px 0;
}

.reviews-header {
  margin-bottom: 20px;
}

.reviews-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.reviews-score {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

.total-score {
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
}

.score-big {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
}

.score-label {
  font-size: 14px;
  color: #ff6b35;
  margin-left: 5px;
}

.score-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-name {
  font-size: 13px;
  color: #666;
}

.score-value {
  font-size: 14px;
  font-weight: bold;
  color: #ff6b35;
}

.review-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.reviewer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.review-date {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.review-images::-webkit-scrollbar {
  display: none;
}

.review-image {
  width: 120px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

.review-more {
  text-align: right;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
}

/* 费用须知样式 */
.phone-notice {
  padding: 0;
  padding-bottom: 40px;
}

.notice-section {
  margin-bottom: 25px;
}

.notice-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.notice-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.notice-label {
  font-weight: 500;
  color: #333;
}

.notice-value {
  color: #ff6b35;
}

.notice-more {
  text-align: right;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
  margin-top: 10px;
}

.notice-content {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-top: 10px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

.notice-map {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: white;
}

.map-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.map-address {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: white;
  border-top: 1px solid #eee;
}

.map-icon {
  font-size: 18px;
  margin-right: 10px;
  color: #ff6b35;
}

.map-text {
  flex: 1;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-copy {
  font-size: 13px;
  color: #3498db;
  cursor: pointer;
}

.map-tabs {
  display: flex;
  background: white;
  border-top: 1px solid #eee;
}

.map-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.map-tab.active {
  color: #3498db;
  font-weight: bold;
  border-bottom-color: #3498db;
}

.map-pois {
  padding: 10px 15px;
  background: white;
  border-top: 1px solid #eee;
}

.map-poi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.map-poi:last-child {
  border-bottom: none;
}

.poi-name {
  flex: 1;
}

.poi-distance {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

/* 房源页面特有样式 */
.phone-recommend {
  padding: 0;
  padding-bottom: 40px;
}

.recommend-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-more {
  font-size: 13px;
  color: #999;
}

.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.recommend-card {
  width: calc(50% - 8px);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: white;
}

.recommend-image {
  height: 120px;
  position: relative;
}

.recommend-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-distance {
  font-size: 12px;
  color: #666;
  margin: 8px 0 5px;
  padding: 0 8px;
}

.recommend-name {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 36px;
}

.recommend-score {
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 5px;
}

.recommend-score-badge {
  background: #ff6b35;
  color: white;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 5px;
}

.recommend-score-num {
  font-size: 12px;
  color: #ff6b35;
  font-weight: bold;
}

.recommend-score-count {
  font-size: 12px;
  color: #999;
}

.recommend-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px 8px;
  gap: 5px;
}

.recommend-tag {
  font-size: 11px;
  color: #3498db;
  background: #f0f8ff;
  padding: 1px 4px;
  border-radius: 2px;
}

.recommend-price {
  display: flex;
  align-items: baseline;
  padding: 8px;
  border-top: 1px solid #f5f5f5;
}

.recommend-current {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
}

.recommend-original {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 5px;
}

.recommend-discount {
  font-size: 12px;
  color: white;
  background: #ff6b35;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: auto;
}

.score-display {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
  margin-right: 5px;
}

.score-text {
  font-size: 14px;
  color: #ff6b35;
  margin-right: 5px;
}

.review-count {
  font-size: 13px;
  color: #999;
  margin-left: 5px;
}

.score-info {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.address-display {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.address-text {
  font-size: 14px;
  color: #333;
  margin-right: 5px;
}

.distance-text {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.address-info {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.main-image-tip,
.detail-image-tip {
  margin-bottom: 10px;
  color: #909399;
  font-size: 12px;
}

.image-upload-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.image-thumb {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-right: 8px;
  margin-bottom: 8px;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.image-thumb .btndel {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #f56c6c;
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 2px;
  z-index: 2;
}

.image-thumb:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.upload-thumb {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  border: 1.5px dashed #bfcbd9;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfcbd9;
  font-size: 28px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-thumb:hover {
  border-color: #409eff;
  color: #409eff;
}
</style>
